import React, {Component} from "react";
import {connect} from'react-redux'
import{hashHistory} from "react-router";
import {Spin, Form, Icon, Input, Button, Row, Col, message} from 'antd'
import {regExpConfig} from "@reg";
import {login} from '@actions/common'
import {getUser} from '@apis/common'
import '@style/login.less';
import Logo from '@images/bg_login.jpg';
import RcQueueAnim from "rc-queue-anim";
import {clearFormCache} from "@actions/common";
import {imgCode} from '@apis/common'

const FormItem =Form.Item

// connect装饰器
@connect((state,props) => ({
    config:state.config,
    loginResponse: state.loginResponse
}))
@Form.create({
    onFieldsChange(props, items) {
    },
})

export default class Login extends Component {
    constructor(props,context) {
        super(props);
        this.state = {
            loading:false,
            show:true,
            getVerifiCode:imgCode + new Date().getTime()
        }
        this._getVerifiCode = this._getVerifiCode.bind(this)
        this.requestErr = this.requestErr.bind(this)
    }

    componentWillMount() {
        console.log(this.props)
        this.props.dispatch(clearFormCache())
    }

    _getVerifiCode(){
        this.setState({
            getVerifiCode:imgCode + new Date().getTime()
        })
    }

    handleSubmit(e){
        e.preventDefault()
        this.props.form.validateFields((err,value) => {
            if(!err){
                this.setState({loading:true})
                this.props.dispatch(login(value,(res)=>{
                    sessionStorage.setItem("token",res.data.token);
                    sessionStorage.setItem("userInfo",JSON.stringify(res.data));
                    hashHistory.push('/')
                },this.requestErr))
            }
        })
    }

    requestErr = (err) => {
        console.log(err)
        message.warning(err.msg);
        this.setState({loading:false})
    }

    render() {
        const {getFieldDecorator} = this.props.form
        return (
            <div className="login-container">
                <div className="flexcolumn">
                    <div className="login-main">
                        <RcQueueAnim delay={300} type="bottom" key="row">
                            {this.state.show ? [
                                <Row key="row0">
                                    <Col span={8}/>
                                    <Col span={8}>
                                        <Spin spinning={this.state.loading}>
                                            <Form onSubmit={e => this.handleSubmit(e)}>
                                                <div>
                                                    <FormItem hasFeedback>
                                                        {getFieldDecorator('user_name', {
                                                            rules: [
                                                                {required: true, min: 3, max: 10, message: '用户名为3-10个字符',},
                                                                {pattern: regExpConfig.policeNo, message: '账号3-10位数字或字母组成'},
                                                            ],
                                                        })(<Input addonBefore={<Icon type="user"/>}
                                                                  placeholder="请输入用户名" type="text"/>)}
                                                    </FormItem>
                                                    <FormItem hasFeedback>
                                                        {getFieldDecorator('password', {
                                                            rules: [
                                                                {required: true, min: 6, max: 16, message: '密码为6-16个字符',},
                                                                {pattern: regExpConfig.pwd, message: '密码由6-16位数字或者字母组成'},
                                                            ],
                                                        })(<Input addonBefore={<Icon type="lock"/>}
                                                                  placeholder="请输入密码" type="password"/>)}
                                                    </FormItem>
                                                    <FormItem hasFeedback>
                                                        {getFieldDecorator('imgCode', {
                                                            rules: [
                                                                {required: true, message: '请输入图中验证码',},
                                                                {pattern: regExpConfig.isAlpha, message: '验证码由字母组成'},
                                                            ],
                                                        })(<Input addonBefore={<Icon type="lock"/>} placeholder="请输入下方验证码" type="text"/>)}
                                                    </FormItem>
                                                    <FormItem hasFeedback>
                                                        <img className="img" title="点击刷新验证码" src={this.state.getVerifiCode} onClick={this._getVerifiCode}/>
                                                    </FormItem>
                                                    <FormItem>
                                                        <Button type="primary" htmlType="submit"
                                                                className="cert-btn">登录</Button>
                                                    </FormItem>
                                                </div>
                                            </Form>
                                        </Spin>
                                    </Col>
                                    <Col span={8}/>
                                </Row>,
                            ] : null}
                        </RcQueueAnim>
                    </div>
                </div>
            </div>
        )
    }
}

